<template>
    <div class="container">
        <!-- 团课课程表  按钮部分 -->
            <div class="handle-box">
                <el-row>
                    <el-col :span="21">
                         <el-button-group class="ml-4">
                        <el-button type="success" @click="addCourseSchedule">新增排课</el-button>
                        <el-button type="info" @click="copyCourseSchedule">复制排课</el-button>
                    </el-button-group>
                    </el-col>
                    <el-col :span="2">
                         <el-button type="warning"  @click="exportReservationData">批量导出预约数据</el-button>
                    </el-col>
                </el-row>
            </div>
        <!-- <el-divider></el-divider> -->
        <!-- 团课课程表 日历部分 -->
        <div style="margin-top: 30px;">
            <MyCalender/>
        </div>
    
        <!-- 复制排课的抽屉 -->
          <el-drawer v-model="addScheduleDrawer" title="新增排课" direction="rtl" size="50%">
           <template #header>
                <h2>新增排课</h2>
            </template>
            <div class="demo-drawer__content">
              <el-form :model="form">
                <el-form-item label="老师" :label-width="formLabelWidth">
                  <el-select v-model="form.teacher" autocomplete="off" >
                    <el-option v-for="item in teacher" :value="item"  :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="课程" :label-width="formLabelWidth">
                  <el-select v-model="form.course" autocomplete="off" >
                    <el-option v-for="item in course" :value="item.id" :label="item.name+'\('+item.id+'\)'" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="日期" :label-width="formLabelWidth">
                 <el-date-picker v-model="form.startDate"
                          type="date"
                          aria-label="Pick a date"
                          placeholder="选择日期"
                          style="width: 100%"/>
                </el-form-item>

              </el-form>
              <div class="demo-drawer__footer">
                <el-button type="primary" :loading="loading" @click="onClick">
                  {{ loading ? 'Submitting ...' : '提交' }}
                </el-button>
                <el-button @click="cancelForm">取消</el-button>
                
              </div>
            </div>
          </el-drawer>
    
        
        <!-- 批量导出的抽屉 -->
    </div>
    </template>
    
    <script setup>
    import { ref,reactive,onMounted} from 'vue'
    import MyCalender from './MyCalendar.vue'
    import { handleTeacherData } from '../../api/teacher' 
    import { handleGroupClassData } from '../../api/groupClass' 
    import {handleTCSubmit} from '../../api/schedule'
    import { ElMessageBox } from 'element-plus'
    import { ElMessage } from 'element-plus'
import { time } from 'echarts'
    const tableData= ref([]) 
    const tableData1= ref([])
    const teacher= ref([])
    const course= ref([])
    const getData = async () => {
    try {

         const { data } = await handleTeacherData()
        console.log("data"+data)
        tableData.value = data
        console.log(tableData.value)
        for (let i in tableData.value){
          teacher.value.push(tableData.value[i].name)
        }
        console.log("........................"+teacher.value) 
    } catch (error) {
        ElMessage.error('请求接口报错')
        console.log(error)
    }
}

    const getData1 = async () => {
    try {

         const { data } = await handleGroupClassData()
        console.log("data"+data)
        tableData1.value = data
        console.log(tableData1.value)
        for (let i in tableData1.value){
          course.value.push({id:tableData1.value[i].id,name:tableData1.value[i].name})
        }
        console.log("........................"+course.value) 
      } catch (error) {
        ElMessage.error('请求接口报错')
        console.log(error)
    }
}
    

onMounted(async () => {
    getData()
    getData1()

}) 
    //新增排课
    const addScheduleDrawer = ref(false)
    //表单中需要提交的数据
    const form = reactive({
        course:'',//课程
        teacher:'',//老师
        startDate:'',//日期
    })

    const addCourseSchedule = () => {
        addScheduleDrawer.value = true
        
    }
    //复制排课
    const copyCourseSchedule = () => {
    
    }
    //批量导出预约数据的按钮
    const exportReservationData =()=>{
    
    }
    const cancelForm = () => {
        addScheduleDrawer.value = false
    }
    const onClick = () => {
        console.log(form)
        handleTCSubmit({name:form.teacher,courseId:form.course,time:form.startDate}).then(res=>{
          console.log(res)
          if(res.status==200){
            addScheduleDrawer.value = false
            ElMessageBox.alert('修改成功！', '修改成功', {
                        type: 'success',
                        center:true,
                    })
          }
          else{
                    ElMessageBox.alert('修改失败！', '修改失败', {
                        type: 'error',
                    })
                  }

        })
       
    }

    
    </script >
    <style lang="less" scoped></style>